<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品分类</title>
<style type="text/css">
* {
	font-size: 14px;
}

a {
	text-decoration: none;
	color: black;
}
img{
	margin-width:auto;
	margin-height:auto;
	height:60%;
	width:60%;
}

.img-div{
	border:none;
	width:20%;
	position:absolute;
	margin-left:3%;
}
.img-right{
	border:none;
	width:60%;
	height:220px;
	float:right;
	margin-right:9%;
	text-align:left;
	text-indent: 4em;
}

.d {
	height: 1450px;
}

.header {
	height: 50px;
	background-color: #0099FF;
}

font {
	float: right;
	padding-right: 10%;
	padding-top: 1%;
}

.blue {
	font-size: 20px;
	color: white;
}

.cart {
	width:80%;
	margin-top: 4%;
	 height:1000px;  
	 border:1px solid black;
}

.forword {
	height: 200px;
	margin-top: 3%;
	list-style: none;
	padding-left: 10%;
	background-color: #f8f8f8;
	margin-bottom: 3%;
}

.forword-div {
	height: 200px;
	float: right;
	margin-right: 11%;
}

.header-font {
	float: right;
	padding-right: 32%;
	padding-top: 1%;
}

.last {
	text-align: center;
	margin-top: 1%;
}

.order{
	border-bottom:1px solid #0099FF;
	height:35px;
	width:76%;
	position:absolute;
	text-align:left;
	padding-top:1%;
	padding-left:3%;
}
.center{
	width:90%;
	border-bottom:1px dashed gray;
	height:240px;
	margin-top:8%;
}

button{
	margin-left:10%;
	background-color:red;
	color:white;
	width:15%;
	height:30px;
	border-radius:12px;
}
</style>
</head>
<body style="background-color: #f8f8f8">
	<div class="d"  align="center">
		<div class="header">
			<font> <span class="blue">书籍分类</span> <span
				style="margin-right: 700px"> </span> <a href="" class="blue">全部分类</a>
				<span>|</span> <a href="" class="blue">首页</a> <span>|</span> <a
				href="" class="blue">图书</a> <span>|</span> <a href="" class="blue">特价</a>
			</font>
		</div>
		<div class="cart">
			<div class="order" >
				<span>排序：</span>
				<a style="padding-left:5%;">出版时间 </a>
				<a style="padding-left:7%;">价格</a>
			</div>
		
		<div class="center">
			<div class="img-div"><img src="../amgs/8822297.jpg"/></div>
			<div class="img-right">
				<dl>
					<h2>白日之梦</h2>
					<dd>《白日之梦》是由袁琼琼主编，四十位散文名家共同执笔的《九歌一〇四年散文选》，用文字编织出一场富丽流荡的梦境，邀你我同游。除了香港作家西西描绘玩具的生活随笔，王定国的家族书写，还涵盖人物、亲情、日常生活等丰富内容。而以旅行为题材的文章不再只是往“外”描述地貌的游记，林怀民的《阿桃去旅行》于生死行旅中有向“内”思索的心灵风景。不论是多么微小的物，或是多么深刻的情，均有涉及。像周芬伶写午后茶屋、傅月庵谈禁忌之书，简媜说：“爱情是我在这世上懂得的事情”。 </dd>
					<br>
					<br>
					<dd>价格：
						<span style="color:red;font-size:30px;">24.50</span>
						<button >购&nbsp;&nbsp;买</button>
					</dd>
				</dl>
			</div>
		</div>
			<div class="center">
			<div class="img-div"><img src="../amgs/8718928.jpg"/></div>
			<div class="img-right">
				<dl>
					<h2>半岛时光</h2>
					<dd>在一条安静的巷子里，隐藏着一家名叫“半岛时光”的咖啡店。
						店里餐单上只有一种咖啡——黑咖啡，但是，老板娘可以根据客人的要求，调制出他们想要的咖啡。
						所有从这里路过的人，无不被店里传出的香气吸引——安静的坏境、温暖的时光，让人不知不觉地停下脚步，缓缓地卸下心防……
						通过老板娘与客人的交谈，便有了这一个个关于“邂逅”的故事……
						这是一本心灵励志故事，故事中的主人公或是一直在等待妈妈回家的学生，或是刚刚在地震中失去恋人的白领，或是憧憬着美好爱情的怀春少女……
						这些故事时而温馨时而忧愁，不仅散发着咖啡独有的香气，也洋溢着人情味，让人看着、听着，不禁热泪盈眶…… </dd>
					<br>
					<br>
					<dd>价格：
						<span style="color:red;font-size:30px;">22.80</span>
						<button >购&nbsp;&nbsp;买</button>
					</dd>
				</dl>
			</div>
		</div>
			<div class="center">
			<div class="img-div"><img src="../amgs/8741221.jpg"/></div>
			<div class="img-right">
				<dl>
					<h2>你的梦想，自己会来找你</h2>
					<dd>“留学耶鲁我学会了什么？”
						“内向的人如何构造巨牛的朋友圈？”
						“如何为别人节省时间的2分钟原则”
						“接地气又立马可用的职场建议”
						“从麦肯锡到盖茨基金会”
						......
					 </dd>
					<br>
					<br>
					<dd>价格：
						<span style="color:red;font-size:30px;">25.90</span>
						<button>购&nbsp;&nbsp;买</button>
					</dd>
				</dl>
			</div>
		</div>
		
	</div>
		<hr width="100%;">

		<div class="forword">
			<div class="forword-div">
				<a href="" style="font-size: 20px;">售后服务</a>
				<p></p>
				<a href="">退货流程</a>
				<p></p>
				<a href="">换货流程</a>
				<p></p>
				<a href="">退款方式</a>
				<p></p>
				<a href="">退货地方</a>
				<p></p>
				<a href="">换货地方</a>
				<p></p>
			</div>
			<div class="forword-div">
				<a href="" style="font-size: 20px;">购物指南</a>
				<p></p>
				<a href="">购物步骤</a>
				<p></p>
				<a href="">搜索商品</a>
				<p></p>
				<a href="">商品缺货</a>
				<p></p>
				<a href="">订单状态</a>
				<p></p>
				<a href="">取消订单</a>
				<p></p>
				<a href="">修改订单</a>
			</div>
			<div class="forword-div">
				<a href="" style="font-size: 20px;">配送方式</a>
				<p></p>
				<a href="">款到发货</a>
				<p></p>
				<a href="">货到付款</a>
				<p></p>
				<a href="">邮政快递</a>
				<p></p>
				<a href="">发货时间</a>
				<p></p>
				<a href="">到货时间</a>
				<p></p>
				<a href="">验货与签收</a>
			</div>
			<div class="forword-div">
				<a href="" style="font-size: 20px;">支付方式</a>
				<p></p>
				<a href="">货到付款</a>
				<p></p>
				<a href="">在线支付</a>
				<p></p>
				<a href="">银行转账</a>
				<p></p>
				<a href="">邮局汇款</a>
				<p></p>
				<a href="">账户余额支付</a>
				<p></p>
				<a href="">汇款到账时间</a>
			</div>
			<div class="forword-div">
				<a href="" style="font-size: 20px;">新手入门</a>
				<p></p>
				<a href="">账户注册</a>
				<p></p>
				<a href="">用户登录</a>
				<p></p>
				<a href="">忘记秘密</a>
				<p></p>
				<a href="">会员积分</a>
				<p></p>
				<a href="">会员级别</a>
				<p></p>
				<a href="">收藏商品</a>
			</div>
		</div>
		<div class="header">
			<font class="header-font"> <a href="" class="blue">正版保障</a> <span
				style="margin-right: 60px"></span> <a href="" class="blue">满额免运</a>
				<span style="margin-right: 60px"></span> <a href="" class="blue">货到付款</a>
				<span style="margin-right: 60px"></span> <a href="" class="blue">免费退货</a>

			</font>
		</div>
		<div class="last">
			<span><a href="">关于我们</a> <span>|</span> <a href="">销售联盟</a> <span>|</span>
				<a href="">图书批发</a> <span>|</span> <a href="">友情连接</a> <span>|</span>
				<a href="">汇款单招领</a> <span>|</span> <a href="">税务师</a> </span>
		</div>
	</div>
</body>
</html>